{% set uniqid = uniqid ?? uniqid('folder_') %}
{% set idBase = "vagrantfile-vm-synced_folder-#{uniqid}" %}
{% set nameBase = "vagrantfile[vm][synced_folder][#{uniqid}]" %}

{% if synced_folder.sync_type is not defined or synced_folder.sync_type == 'default' %}
    {% set sync_type = 'default' %}
{% elseif synced_folder.sync_type == 'nfs' %}
    {% set sync_type = 'nfs' %}
{% elseif synced_folder.sync_type == 'smb' %}
    {% set sync_type = 'smb' %}
{% elseif synced_folder.sync_type == 'rsync' %}
    {% set sync_type = 'rsync' %}
{% else %}
    {% set sync_type = 'default' %}
{% endif %}

{% set smb_host = synced_folder.smb.smb_host is defined ? synced_folder.smb.smb_host : '' %}
{% set smb_username = synced_folder.smb.smb_username is defined ? synced_folder.smb.smb_username : '' %}
{% set smb_password = synced_folder.smb.smb_password is defined ? synced_folder.smb.smb_password : '' %}
{% set smb_mount_dir_mode = synced_folder.smb.mount_options.dir_mode is defined ? synced_folder.smb.mount_options.dir_mode : '0775' %}
{% set smb_mount_file_mode = synced_folder.smb.mount_options.file_mode is defined ? synced_folder.smb.mount_options.file_mode : '0664' %}
{% set rsync_auto = (synced_folder.rsync.auto is not defined or synced_folder.rsync.auto == 'true') ? 'true' : 'false' %}
{% set rsync_args = (synced_folder.rsync.args is defined and synced_folder.rsync.args is iterable) ? synced_folder.rsync.args : {} %}
{% set rsync_exclude = (synced_folder.rsync.exclude is defined and synced_folder.rsync.exclude is iterable) ? synced_folder.rsync.exclude : {} %}
{% set owner = (synced_folder.owner is defined and synced_folder.owner) ? synced_folder.owner : '' %}
{% set group = (synced_folder.group is defined and synced_folder.group) ? synced_folder.group : '' %}

<div id="{{ idBase }}" data-uniqid="{{ uniqid }}" data-name="{{ nameBase }}"
     class="tab-pane {{ active is defined and active ? 'active' }}">
    <input type="hidden" id="{{ idBase }}-owner"
           name="{{ nameBase }}[owner]"
           value="{{ owner }}" />
    <input type="hidden" id="{{ idBase }}-group"
           name="{{ nameBase }}[group]"
           value="{{ group }}" />

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-source">
            Folder Source
        </label>
        <input type="text" id="{{ idBase }}-source"
               name="{{ nameBase }}[source]"
               placeholder="/path/to/your/web/files" class="form-control"
               value="{{ synced_folder.source }}" />
        <div class="help-block">
            <p>Path your files are stored on host machine,
                <a href="http://docs.vagrantup.com/v2/synced-folders/index.html"
                   target="_blank">more information</a>.</p>
            <p>Windows users: You must use forward-slash
                <code>c:/dev/vagrant/webroot</code> or double back-slash
                <code>c:\\dev\\vagrant\\webroot</code></p>
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-target">
            Folder Target
        </label>
        <input type="text" id="{{ idBase }}-target"
               name="{{ nameBase }}[target]"
               placeholder="/var/www" class="form-control"
               value="{{ synced_folder.target }}" />
        <div class="help-block">
            Path your hosts' files are mounted on guest machine,
            <a href="http://docs.vagrantup.com/v2/synced-folders/index.html"
               target="_blank">more information</a>.
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12">
        <div class="clearfix"><label>Shared Folder Type</label></div>

        <div class="radio">
            <input type="radio" id="{{ idBase }}-sync_type-default"
                   name="{{ nameBase }}[sync_type]"
                   value="default" {% if sync_type == 'default' %}checked{% endif %}
                   data-toggle="radio-collapse" data-target="#{{ idBase }}-folder_options-default" />
            <label for="{{ idBase }}-sync_type-default">
                Default
            </label>
            <div class="help-block">
                This is the slowest option of all.
                <a href="http://docs.vagrantup.com/v2/synced-folders/basic_usage.html"
                   target="_blank">More information</a>.
            </div>
        </div>

        <div class="radio">
            <input type="radio" id="{{ idBase }}-sync_type-nfs"
                   name="{{ nameBase }}[sync_type]"
                   value="nfs" {% if sync_type == 'nfs' %}checked{% endif %}
                   data-toggle="radio-collapse" data-target="#{{ idBase }}-folder_options-nfs" />
            <label for="{{ idBase }}-sync_type-nfs">
                NFS
            </label>
            <div class="help-block">
                NFS is highly recommended for OSX and Linux!
                Make sure to install the
                <span class="label label-info" data-toggle="help-text">
                    <i class="fa fa-ellipsis-h"></i></span>
                <div class="hidden">
                    vagrant-bindfs plugin with
                    <code>$ vagrant plugin install vagrant-bindfs</code>.
                    <a href="http://docs.vagrantup.com/v2/synced-folders/nfs.html"
                       target="_blank">More information about NFS</a>, and
                    <a href="https://github.com/gael-ian/vagrant-bindfs"
                       target="_blank">more information about vagrant-bindfs</a>.
                </div>
            </div>
        </div>

        <div class="radio">
            <input type="radio" id="{{ idBase }}-sync_type-smb"
                   name="{{ nameBase }}[sync_type]"
                   value="smb" {% if sync_type == 'smb' %}checked{% endif %}
                   data-toggle="radio-collapse" data-target="#{{ idBase }}-folder_options-smb" />
            <label for="{{ idBase }}-sync_type-smb">
                SMB
            </label>
            <div class="help-block">
                Windows only, and highly recommended.
                <a href="http://docs.vagrantup.com/v2/synced-folders/smb.html"
                   target="_blank">More information</a>.
            </div>
        </div>

        <div class="radio">
            <input type="radio" id="{{ idBase }}-sync_type-rsync"
                   name="{{ nameBase }}[sync_type]"
                   value="rsync" {% if sync_type == 'rsync' %}checked{% endif %}
                   data-toggle="radio-collapse" data-target="#{{ idBase }}-folder_options-rsync" />
            <label for="{{ idBase }}-sync_type-rsync">
                RSync
            </label>
            <div class="help-block">
                If you are on Windows you need <code>rsync</code> installed.
                The simplest way
                <span class="label label-info" data-toggle="help-text">
                    <i class="fa fa-ellipsis-h"></i></span>
                <div class="hidden">
                    is to
                    <a href="https://www.cygwin.com/" target="_blank">use Cygwin</a>
                    and install it through there. Alternatively, you can
                    <a href="https://www.itefix.no/i2/content/cwrsync-free-edition"
                       target="_blank">install rsync separately</a>
                    and add it to your <code>PATH</code>.
                    <a href="http://docs.vagrantup.com/v2/synced-folders/rsync.html"
                       target="_blank">More information</a>.
                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div id="{{ idBase }}-folder_options" class="col-xs-12">
        <div id="{{ idBase }}-folder_options-default"
             class="collapse {% if sync_type == 'default' %}in{% endif %}">
        </div>

        <div class="clearfix"></div>

        <div id="{{ idBase }}-folder_options-nfs"
             class="collapse {% if sync_type == 'nfs' %}in{% endif %}">
        </div>

        <div class="clearfix"></div>

        <div id="{{ idBase }}-folder_options-smb"
             class="collapse {% if sync_type == 'smb' %}in{% endif %}">
            <div class="form-group col-xs-12">
                <label for="{{ idBase }}-smb-smb_host">
                    SMB Host
                </label>
                <input type="text" id="{{ idBase }}-smb-smb_host"
                       name="{{ nameBase }}[smb][smb_host]"
                       placeholder="" class="form-control"
                       value="{{ smb_host }}" />
                <div class="help-block">
                    The host IP where the SMB mount is located. If this isn't specified,
                    Vagrant will attempt to determine this automatically.
                </div>
            </div>

            <div class="form-group col-xs-12">
                <label for="{{ idBase }}-smb-smb_username">
                    SMB Username
                </label>
                <input type="text" id="{{ idBase }}-smb-smb_username"
                       name="{{ nameBase }}[smb][smb_username]"
                       placeholder="" class="form-control"
                       value="{{ smb_username }}" />
                <div class="help-block">
                    The username used for authentication to mount the SMB mount. This is the username to access
                    the mount, <em>not</em> the username of the account where the folder is being mounted to. This is
                    usually your Windows username. If this isn't specified, Vagrant will prompt you for it.
                </div>
            </div>

            <div class="form-group col-xs-12">
                <label for="{{ idBase }}-smb-smb_password">
                    SMB Password
                </label>
                <input type="text" id="{{ idBase }}-smb-smb_password"
                       name="{{ nameBase }}[smb][smb_password]"
                       placeholder="" class="form-control"
                       value="{{ smb_password }}" />
                <div class="help-block">
                    The password used for authentication to mount the SMB mount. This is the password for the
                    username specified by <code>smb_username</code>. If this is not specified, Vagrant will
                    prompt you for it. It is highly recommended that you do not set this, since it would
                    expose your password directly in your <code>config.yaml</code>.
                </div>
            </div>

            <input type="hidden" id="{{ idBase }}-smb-mount_options-dir_mode"
                   name="{{ nameBase }}[smb][mount_options][dir_mode]"
                   value="{{ smb_mount_dir_mode }}" />
            <input type="hidden" id="{{ idBase }}-smb-mount_options-file_mode"
                   name="{{ nameBase }}[smb][mount_options][file_mode]"
                   value="{{ smb_mount_file_mode }}" />
        </div>

        <div class="clearfix"></div>

        <div id="{{ idBase }}-folder_options-rsync"
         class="collapse {% if sync_type == 'rsync' %}in{% endif %}">
            <div class="form-group col-xs-12">
                <label for="{{ idBase }}-rsync-args">
                    Rsync Args
                </label>
                <select id="{{ idBase }}-rsync-args"
                       name="{{ nameBase }}[rsync][args][]"
                       multiple class="form-control select-tags-editable">
                    {% for arg in rsync_args %}
                        <option selected value="{{ arg }}">{{ arg }}</option>
                    {% endfor %}
                </select>
                <div class="help-block">
                    A list of arguments to supply to rsync.
                </div>
            </div>

            <div class="form-group col-xs-12">
                <label for="{{ idBase }}-rsync-exclude">
                    Exclude Directories
                </label>
                <select id="{{ idBase }}-rsync-exclude"
                       name="{{ nameBase }}[rsync][exclude][]"
                       multiple class="form-control select-tags-editable">
                    {% for dir in rsync_exclude %}
                        <option selected value="{{ dir }}">{{ dir }}</option>
                    {% endfor %}
                </select>
                <div class="help-block">
                    Files or directories to exclude from the sync.
                </div>
            </div>

            <div class="form-group col-xs-12">
                <div class="clearfix"><label>Auto Sync</label></div>

                <div class="radio">
                    <input type="radio" id="{{ idBase }}-rsync-auto-on"
                           name="{{ nameBase }}[rsync][auto]"
                           value="{{ rsync_auto }}"
                           {% if rsync_auto == 'true' %}checked{% endif %} />
                    <label for="{{ idBase }}-rsync-auto-on">
                        On
                    </label>
                    <div class="help-block">
                        Vagrant's <code>rsync-auto</code> will watch and
                        automatically sync this folder.
                    </div>
                </div>

                <div class="radio">
                    <input type="radio" id="{{ idBase }}-rsync-auto-off"
                           name="{{ nameBase }}[rsync][auto]"
                           value="{{ rsync_auto }}"
                           {% if rsync_auto == 'false' %}checked{% endif %} />
                    <label for="{{ idBase }}-rsync-auto-off">
                        Off
                    </label>
                    <div class="help-block">
                        Vagrant's <code>rsync-auto</code> will <strong>not</strong> watch and
                        automatically sync this folder.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
